<template>
	<view>
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 title="路径管理">
			<view class="navbar-right" slot="right" @click="addPathManagement()">添加</view>
		</u-navbar>
		<view class="content">
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="info-box">
					<u-row gutter="0">
						<u-col span="6" @tap="openDetails(item)">
							<view class="info-left title">查看详情</view>
						</u-col>
						<u-col span="6" @tap="openDetails(item)">
							<view class="info-right">
								<image class="left-img" src="../../../static/right.png" mode=""></image>
							</view>
						</u-col>
					</u-row>
					<u-line color="#efefef" />
					<u-row gutter="0">
						<u-col span="6">
							<view class="info-left">作业点</view>
						</u-col>
						<u-col span="6">
							<view class="info-right">{{ siteData[item.operationId] }}</view>
						</u-col>
					</u-row>
					<u-line color="#efefef" />
					<u-row gutter="0">
						<u-col span="6">
							<view class="info-left">卸土点</view>
						</u-col>
						<u-col span="6">
							<view class="info-right">{{ siteData[item.unloadId] }}</view>
						</u-col>
					</u-row>
					<u-line color="#efefef" />
					<!-- 					<u-row gutter="0">
						<u-col span="6">
							<view class="info-left">行驶距离</view>
						</u-col>
						<u-col span="6">
							<view class="info-right">{{ item.range }}</view>
						</u-col>
					</u-row>
					<u-line color="#efefef" /> -->
					<u-row gutter="0">
						<u-col span="6">
							<view class="info-left">单次费用</view>
						</u-col>
						<u-col span="6">
							<view class="info-right">{{ item.cost }}</view>
						</u-col>
					</u-row>
					<u-line color="#efefef" />
					<u-row gutter="0">
						<u-col span="6">
							<view class="info-left">路径状态</view>
						</u-col>
						<u-col span="6">
							<view class="info-right" :class="[item.status === 1? 'sataus-1':'sataus-0']">{{ item.status === 1? "启用":"禁用" }}</view>
						</u-col>
					</u-row>
				</view>
			</view>
			<view v-show="isLoadMore">
				<uni-load-more :status="loadStatus" :contentText="text"></uni-load-more>
			</view>
			<view class="divider">
				<u-divider bg-color="#eaf1ff">END</u-divider>
			</view>
		</view>
		<u-popup v-model="show" mode="center" height="900rpx" width="85%" :closeable="true" border-radius="13" style="z-index: 0;">
			<view class="cardDetail">
				<u-form :model="form" ref="uForm">
					<u-form-item label-width="150" label="作业点">
						<u-input v-model="operationId" @click="selectShow('z')" placeholder="请输选择作业点" type="select" />
					</u-form-item>
					<u-form-item label-width="150" label="卸土点">
						<u-input v-model="unloadId" @click="selectShow('x')" placeholder="请输选择卸土点" type="select" />
					</u-form-item>
					<u-form-item label-width="150" label="单次费用">
						<u-input v-model="form.cost" placeholder="请输入单次运输费用" />
					</u-form-item>
<!-- 					<u-form-item label-width="150" label="运输范围">
						<u-input v-model="form.range" placeholder="请输入运输范围" />
					</u-form-item> -->
					<u-form-item :border-bottom="false" label="是否启用" prop="status" label-width="150">
						<u-switch v-model="status" slot="right"></u-switch>
					</u-form-item>
				</u-form>
				<view class="buttonBox">
					<u-button type="primary" style="margin-top: 30rpx;" @tap="editPath">保存</u-button>
					<u-button type="error" style="margin-top: 40rpx;" @tap="deletePath">删除</u-button>
				</view>
			</view>

		</u-popup>
		<kModel ref="kModel" />
		<!-- 选择器 -->
		<u-select mode="single-column" :list="selectZList" v-model="selectZShow" @confirm="selectZConfirm"></u-select>
		<u-select mode="single-column" :list="selectXList" v-model="selectXShow" @confirm="selectXConfirm"></u-select>
	</view>
</template>

<script>
	import {
		getPathList,
		deletePath,
		updataPath
	} from '@/api/path.js'
	import {
		getSite
	} from "@/api/site.js"
	export default {
		data() {
			return {
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF'
				},
				// 修改删除
				form: {
					// operationId: '',
					// unloadId: '',
					// status: null,
					// range: null,
					// projectId: null,
					// cost: null
				},
				formAgain: {

				},
				selectZList: [],
				selectXList: [],
				status: true,
				// 显示选择器
				operationId: '',
				unloadId: '',
				// 控制选择器弹出
				selectZShow: false,
				selectXShow: false,
				show: false,
				loadStatus: 'loading',
				isLoadMore: false,
				isOnshow: true,
				prevPage: null,
				text: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: ""
				},
				queryInfo: {
					projectId: null,
					page: 1,
					count: 4
				},
				siteData: {},
				dataList: [],
				isEdit: true
			}
		},

		onShow() {
			var pages = getCurrentPages();
			this.prevPage = pages[pages.length - 1];
			if (this.prevPage.brand === true) {
				this.getSiteData(() => {
					this.getData()
				})
			}
			// console.log(brand)
			if (this.isOnshow === true) {
				this.getSiteData(() => {
					this.getData()
				})
			}

		},
		// created() {
		// 	this.getSiteData()
		// },
		onReachBottom() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.queryInfo.page += 1
				this.getData()
			}
		},
		watch: {
			status: {
				handler(val) {
					if (val) {
						this.form.status = 1
					} else {
						this.form.status = 0
					}
				},
				immediate: true
			}
		},
		mounted() {},
		methods: {
			addPathManagement() {
				uni.navigateTo({
					url: './addPathManagement/index'
				});
			},
			clone(obj) { //深拷贝
				if (obj === null) return null
				if (typeof obj !== 'object') return obj;
				if (obj.constructor === Date) return new Date(obj);
				var newObj = new obj.constructor(); //保持继承链
				for (var key in obj) {
					if (obj.hasOwnProperty(key)) { //不遍历其原型链上的属性
						var val = obj[key];
						// newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; // 使用arguments.callee解除与函数名的耦合
						newObj[key] = typeof val === 'object' ? val : val; // 使用arguments.callee解除与函数名的耦合
					}
				}
				return newObj;
			},
			openDetails(item) {
				console.log(item)
				this.id = item.id
				this.form = this.clone(item)
				this.formAgain = this.clone(item)
				this.operationId = this.siteData[item.operationId]
				this.unloadId = this.siteData[item.unloadId]
				this.show = true
				this.status = item.status === 1 ? true : false
				delete this.form.id
				console.log(this.form)
			},
			selectShow(type) {

				if (type === 'z') {
					this.selectZShow = true
				} else if (type === 'x') {
					this.selectXShow = true
				}
			},
			// 删除路径
			deletePath() {
				uni.showModal({
					title: '删除',
					content: '是否永久删除？',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							deletePath(this.id).then(res => {
								console.log(res)
								uni.showToast({
									title: res.msg,
									icon: "none"
								})
								if (res.code !== 1) {
									return
								} else {
									setTimeout(() => {
										this.getData(true)
										this.show = false
									}, 500)
								}

							})

						} else if (res.cancel) {
							// console.log('用户点击取消');
							uni.showToast({
								title: "取消删除",
								icon: "none"
							})
							return
						}
					}
				});
				console.log(this.form)
			},

			// 更新路径
			editPath() {
				for (var i in this.form) {
					if (this.form[i] !== this.formAgain[i]) {
						updataPath(this.id, this.form).then(res => {
							console.log(this.form)
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
							if (res.code !== 1) {
								return
							} else {
								this.getData(true)
								this.show = false
							}
						})
						this.show = false
						return
					}
				}
				this.$urlTo.Tip("请做出修改")

			},
			// 选择商品类型回调
			selectZConfirm(e) {
				this.form.operationId = '';
				e.map((val, index) => {
					this.form.operationId = val.value
					this.operationId = val.label
				});
			},
			selectXConfirm(e) {
				this.form.unloadId = '';
				e.map((val, index) => {
					this.form.unloadId = val.value
					this.unloadId = val.label
				});
			},
			getSiteData(callback) {
				this.selectXList = []
				this.selectZList = []
				getSite({
					projectId: uni.getStorageSync('id')
				}).then(res => {
					if (res.code !== 1) {
						uni.showToast({
							title: "数据获取失败",
							icon: "none"
						})
						return
					}
					// console.log(res)
					res.result.forEach((item, index) => {
						this.siteData[item.id] = item.name
						let lemp = {}
						lemp.label = item.name
						lemp.value = item.id
						if (item.type === '1') {
							this.selectZList.push(lemp)
						} else if (item.type === '2') {
							this.selectXList.push(lemp)
						}
					})

					// console.log(this.siteData)
					callback()
				})
			},
			getData(type) {
				if (this.isOnshow === true) {
					this.$refs.kModel.showModel({
						type: 'loading',
						title: '获取数据中',
						style: 'circle',
					})
				}
				if (type) {
					this.queryInfo.page = 1
					this.queryInfo.count = 8
				}
				this.queryInfo.projectId = uni.getStorageSync('id')
				getPathList(this.queryInfo).then(res => {
					if (res.code === 1) {
						if (res.result.data) {
							if (this.prevPage.brand === true) {
								// this.dataList = this.dataList.concat(res.result.data.slice(res.result.data.length - 1))
								this.dataList.splice(0, 0, res.result.data.slice(res.result.data.length - 1)[0])
								this.prevPage.brand = false
							} else if (type) {
								this.dataList = res.result.data
							} else {
								this.dataList = this.dataList.concat(res.result.data)
							}
							if (res.result.data.length < this.queryInfo.count) {
								this.isLoadMore = true
								this.loadStatus = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.loadStatus = 'nomore'
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.isLoadMore = false
						if (this.page > 1) {
							this.page -= 1
						}
					}
					if (this.isOnshow === true) {
						this.$refs.kModel.closeModel()
					}
					if (this.isOnshow === true) {
						this.isOnshow = false
					}
					// console.log(this.dataList)
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.content {
		.item {
			padding: 20rpx;
			margin-bottom: 1rpx;
			padding: 20rpx 40rpx;

			.info-box {
				background-color: #ffffff;
				border-radius: 10rpx;
				padding: 0rpx 40rpx;

				.info-left {
					font-size: 30rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 40rpx;
					letter-spacing: 1rpx;
					color: #b1b8c8;
					padding: 20rpx 0px;
				}

				.info-right {
					font-size: 30rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 40rpx;
					letter-spacing: 1rpx;
					color: #2c3240;
					text-align: right;
					font-weight: bold;
					padding: 20rpx 0px;
				}

				.left-img {
					width: 20rpx;
					height: 29rpx;
				}

				.title {
					color: #5c92ff !important;
					font-weight: bold;
				}

				.sataus-1 {
					color: #3ce68c;
				}

				.sataus-0 {
					color: red;
				}
			}
		}
	}

	.divider {
		margin-top: 30rpx;
	}

	.cardDetail {
		height: 100%;
		padding: 0 30rpx;
		padding-top: 100rpx;

	}
</style>
